<html>
 
<head>
    <title>高亮测试</title>
    <style>
        body {
            background-color: #000;
            margin: 0px;
            overflow: hidden;
        }
 
        #WebGL {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
        }
    </style>
</head>
 
<body>
    <div id="WebGL"></div>
    <script src="./lib/jquery/dist/jquery-1.12.4.min.js"></script>
    <script src="./lib/three.js/build/three.min.js"></script>
    <script src="./lib/three.js/examples/js/controls/OrbitControls.js"></script>
    <script src="./lib/three.js/examples/js/loaders/GLTFLoader.js"></script>
    <script>
		'use strict';
        var container, camera, scene, renderer, geometry, material, controls; //常用变量
        var spotLight, mesh_sphere; //自定义对象变量
        var target = new THREE.Vector3(0, 30, 0);
        var webGLW = $('#WebGL').width();
        var webGLH = $('#WebGL').height();
        var textureLoader = new THREE.TextureLoader(); //纹理加载器
        var gltfLoader = new THREE.GLTFLoader()
        var texture_box;
        init();
        animate();
        
        function animate() {
            requestAnimationFrame(animate);
            if (controls) controls.update();
            update();
            renderer.render(scene, camera);
        }

        function update() {
            if (texture_box) {
                // 设置纹理偏移
                var time = Date.now() * 0.004;
                texture_box.offset.x += 0.001; //左右偏移
                if (texture_box.offset.x >= 0.5) {
                    texture_box.offset.x = 0;
                }
                texture_box.offset.y -= 0.005;
            }
        }

        // 初始化
        function init() {
            container = document.getElementById('WebGL');
            rendererScene(); //场景渲染
            sceneBackground();
            setCamera(); // 更新摄像机
            plane(); // 地面
            lights(); //灯光：聚光灯
            loadModel(); //添加模型
            OrbitControls(camera, renderer); //OrbitControls控件模块
            window.addEventListener('resize', onWindowResize, false); //监听屏幕变化
        }

        function rendererScene() {
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            renderer.gammaInput = true;
            renderer.gammaOutput = true;
            container.appendChild(renderer.domElement);
        }

        function sceneBackground() {
            scene = new THREE.Scene()
            scene.background = new THREE.Color("black")
        }

        function setCamera() {
            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.set(0, 50, 200);
            camera.lookAt(target);
        }

        function plane() {
            // 地面
            let geometry = new THREE.PlaneBufferGeometry(200, 200);
            let grid_mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
                color: 0x999999,
                // depthWrite: false
            }));
            grid_mesh.rotation.x = -Math.PI / 2;
            grid_mesh.receiveShadow = true;
            grid_mesh.name = "plane"
            scene.add(grid_mesh);
 
            var grid = new THREE.GridHelper(200, 20, 0x000000, 0x000000);
            grid.name = "plane-border"
            // grid.material.opacity = 0.2;
            // grid.material.transparent = true;
            scene.add(grid);
        }
        
        function lights() {
            var ambient = new THREE.AmbientLight(0xffffff);
            ambient.name = "ambient"
            scene.add(ambient);
            //聚光灯
            //  SpotLight( color：颜色, intensity：强度, distance：发光距离, angle：角度, penumbra：边缘范围, decay：衰减 )
            // spotLight = new THREE.SpotLight(0xffffff, 1);
            // spotLight.position.set(0, 120, 0);
            // spotLight.angle = Math.PI / 6;
            // spotLight.penumbra = 0.05; //边缘范围，反比
            // spotLight.decay = 2; //衰减系数，反比
            // spotLight.distance = 400; //发光距离
            // spotLight.castShadow = true; //阴影
            // spotLight.shadow.mapSize.width = 1024;
            // spotLight.shadow.mapSize.height = 1024;
            // spotLight.shadow.camera.near = 10; //近截面
            // spotLight.shadow.camera.far = 250;
            // spotLight.name = "spotLight"
            // scene.add(spotLight);
        }

        function loadModel() {
            gltfLoader.load("test.gltf", function ( object ) {
                var objs = object.scene.children;
                objs.map(function(obj) {
                    let newObj = obj.clone()
                    if (obj.name == "wall-line") {
                        newObj.material.needsUpdate = true
                        newObj.material.map.needsUpdate = true
                        texture_box = newObj.material.map
                    }
                    scene.add(newObj)
                })
            })
        }

        function OrbitControls(camera, renderer) {
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.target = target; //控制的target
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

    </script>
</body>
 
</html>